<template>
  <div class="seeker-profile">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toggleEdit">
          {{ isEditing ? '保存' : '编辑' }}
        </el-button>
      </div>
      
      <!-- 编辑模式 -->
      <el-form v-if="isEditing" :model="seekerForm" :rules="rules" ref="seekerForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="seekerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="seekerForm.gender">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="seekerForm.age" :min="16" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactNumber">
          <el-input v-model="seekerForm.contactNumber"></el-input>
        </el-form-item>
        <!-- 如果已就业,显示录取单位(不可编辑) -->
        <el-form-item v-if="seekerForm.hiredStatus === 1" label="录取单位">
          <el-input v-model="employerName" disabled></el-input>
        </el-form-item>
      </el-form>

      <!-- 查看模式 -->
      <div v-else class="profile-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ seekerForm.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ seekerForm.gender === 'M' ? '男' : seekerForm.gender === 'F' ? '女' : '' }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">{{ seekerForm.age }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ seekerForm.contactNumber }}</el-descriptions-item>
          <el-descriptions-item label="就业状态">
            {{ seekerForm.hiredStatus === 1 ? '已就业' : '未就业' }}
          </el-descriptions-item>
          <!-- 如果已就业,显示录取单位 -->
          <el-descriptions-item v-if="seekerForm.hiredStatus === 1" label="录取单位">
            {{ employerName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(seekerForm.createTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SeekerProfile',
  data() {
    return {
      loading: false,
      isEditing: false,
      employerName: '', // 新增录取单位名称
      seekerForm: {
        id: '',
        name: '',
        gender: '',
        age: 0,
        contactNumber: '',
        hiredStatus: 0,
        hiredEmployerId: null, // 新增录取单位ID
        createTime: '',
        updateTime: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        contactNumber: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getSeekerInfo()
  },
  methods: {
    async getSeekerInfo() {
      this.loading = true
      try {
        const response = await this.$http.get(`/job-seeker/info/${this.$store.state.user.user.referenceId}`)
        if (response.data.code === 200) {
          this.seekerForm = response.data.data
          // 如果已就业,获取录取单位信息
          if (this.seekerForm.hiredStatus === 1 && this.seekerForm.hiredEmployerId) {
            await this.getEmployerInfo(this.seekerForm.hiredEmployerId)
          }
        } else {
          this.$message.error(response.data.msg || '获取个人信息失败')
        }
      } catch (error) {
        console.error('获取个人信息失败:', error)
        this.$message.error('获取个人信息失败')
      } finally {
        this.loading = false
      }
    },
    // 获取录取单位信息
    async getEmployerInfo(employerId) {
      try {
        const response = await this.$http.get(`/employer/${employerId}`)
        if (response.data.code === 200) {
          this.employerName = response.data.data.employerName
        }
      } catch (error) {
        console.error('获取录取单位信息失败:', error)
        this.$message.error('获取录取单位信息失败')
      }
    },
    toggleEdit() {
      if (this.isEditing) {
        this.$refs.seekerForm.validate(async (valid) => {
          if (valid) {
            this.loading = true
            try {
              const response = await this.$http.post('/job-seeker/update', this.seekerForm)
              if (response.data.code === 200) {
                this.$message.success('保存成功')
                this.isEditing = false
                await this.getSeekerInfo()
              } else {
                this.$message.error(response.data.msg || '保存失败')
              }
            } catch (error) {
              console.error('保存失败:', error)
              this.$message.error('保存失败')
            } finally {
              this.loading = false
            }
          }
        })
      } else {
        this.isEditing = true
      }
    },
    formatDateTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.seeker-profile {
  padding: 20px;
}
.profile-content {
  margin-top: 20px;
}
.box-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
</style> 